<div id="collection-details"
     class="collection-details content"
     data-bind="with: $root.collectionDetails, removed_from_view: $root.collectionDetails.removedFromView">

  <!-- ko if: conversationEntity() -->
    <div class="content-titlebar">
      <div class="content-titlebar-items-left">
        <span class="content-titlebar-icon icon-back" data-bind="click: clickOnBackButton" data-uie-name="do-collection-details-close"></span>
      </div>
      <span class="content-titlebar-items-center" data-bind="text: conversationEntity().display_name()" data-uie-name="collection-details-conversation-name"></span>
    </div>

    <div class="content-list-wrapper">
      <div class="content-list collection-list" data-bind="antiscroll: true">
        <div class="collection-images">
          <!-- ko foreach: {data: items(), as: 'messageEntity'} -->
            <!-- ko if: $parent.shouldShowHeader(messageEntity) -->
              <header class="collection-date-separator" data-bind="text: $parent.getTitleForHeader(messageEntity)"></header>
            <!-- /ko -->
            <!-- ko if: messageEntity.category & z.message.MessageCategory.IMAGE -->
              <image-component class="collection-image" params="asset: messageEntity.get_first_asset().resource, click: function() {$parent.clickOnImage(messageEntity)}"></image-component>
            <!-- /ko -->
            <!-- ko if: messageEntity.category & z.message.MessageCategory.LINK -->
              <link-preview-asset params="message: messageEntity, header: true"></link-preview-asset>
            <!-- /ko -->
            <!-- ko if: messageEntity.get_first_asset().is_file() -->
              <file-asset class="collection-file" params="message: messageEntity, header: true"></file-asset>
            <!-- /ko -->
            <!-- ko if: messageEntity.get_first_asset().is_audio() -->
              <audio-asset class="collection-file" params="message: messageEntity, header: true"></audio-asset>
            <!-- /ko -->
          <!-- /ko -->
        </div>
      </div>
    </div>
  <!-- /ko -->

</div>
